<template>
  <div class="execution">
    <basic-container>
      <div class="search-box">
        <el-form ref="searchForm" :inline="true" :model="searchForm">
          <!--          <el-row>-->
          <!--            <el-col :span="6">-->
          <el-form-item label="接入/接出" prop="commType">
            <el-select v-model="searchForm.commType" @change="getRangeSelect" placeholder="接入/接出">
              <el-option v-for="item in rangeList" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <!--            </el-col>-->

          <!--            <el-col :span="6">-->
          <el-form-item label="接入项目名称" prop="sysCode" v-if="searchForm.commType === '0'">
            <el-select v-model="searchForm.inSysName" @change="getGroupListBySysCode" placeholder="接入项目名称">
              <el-option v-for="item in sysList" :key="item.code" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
          <!--            </el-col>-->
          <!--            <el-col :span="6">-->
          <el-form-item label="服务名称" prop="groupCode" v-if="searchForm.commType === '0'">
            <el-select v-model="searchForm.groupCode" placeholder="服务名称">
              <el-option v-for="item in groupList" :key="item.code" :label="item.name"
                         :value="item.code"></el-option>
            </el-select>
          </el-form-item>
          <!--            </el-col>-->
          <!--            <el-col :span="6">-->
          <el-form-item label="接出项目名称" prop="thirdSys" v-if="searchForm.commType === '1'">
            <el-select v-model="searchForm.inSysName" @change="setSysName" placeholder="接出项目名称">
              <el-option v-for="item in thirdSysList" :key="item.code" :label="item.name"
                         :value="item.code"></el-option>
            </el-select>
          </el-form-item>
          <!--            </el-col>-->
          <!--            <el-col :span="6">-->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchChangeSelf">搜 索</el-button>
            <el-button type="default" icon="el-icon-delete" @click="searchReset">清 空</el-button>
          </el-form-item>
          <!--            </el-col>-->
          <!--          </el-row>-->

        </el-form>
      </div>


      <avue-crud
        ref="crud"
        :option="option"
        :data="tableList"
        :table-loading="tableLoading"
        :page="page"
        @on-load="getList"
        @refresh-change="refreshChange"
        @search-change="searchChange"
        @search-reset="searchReset"
        @size-change="sizeChange"
        @current-change="currentChange"
        @row-del="handleDelete"
      >
        <template slot-scope="scope" slot="menuLeft">
          <el-button type="primary"
                     icon="el-icon-plus"
                     size="small"
                     @click.stop="handleAdd()">新增</el-button>
        </template>

        <template
          slot="menu"
          slot-scope="scope">
          <el-button
            v-if="permissionBtn.pre_report_edit"
            type="text"
            size="small"
            icon="el-icon-edit"
            @click="handleEdit(scope.row.confId)">查看详情
          </el-button>
          <el-button
            v-if="permissionBtn.pre_report_del"
            type="text"
            size="small"
            icon="el-icon-delete"
            @click="handleDelete(scope.row,scope.index)">删除
          </el-button>
          <el-button
            v-if="permissionBtn.pre_report_out && scope.row.commType == 1"
            type="text"
            size="small"
            icon="el-icon-edit"
            @click="handleOutTest(scope.row,scope.index)">接出测试
          </el-button>
        </template>
      </avue-crud>

      <report-edit v-if="showEdit" :show.sync="showEdit" :editId="editId" @update="refreshChange"></report-edit>
    </basic-container>
  </div>
</template>
<script>
  import { fetchList, putObj,delObj, testRemote } from '@/api/pre/report'
  import { option } from '@/const/crud/pre/report'
  import {getSysList} from '@/api/pre/insystem'
  import {getGroupList, getGroupListBySysCode} from '@/api/pre/group'
  import {getOutSysList} from '@/api/pre/outsystem'
  import {rangeList} from '@/const/crud/pre/msg'
  import { mapGetters } from 'vuex'

  import reportEdit from './edit'
  export default {
    name: 'Node',
    data(){
      return{
        option: option,
        rangeList,
        tableList: [],
        tableLoading: false,
        searchForm: {
          commType: '0',
          sysCode: '',
          groupCode: '',
          thirdSys: '',
        },
        page: {
          total: 0,
          currentPage: 1,
          pageSize: 20,
        },

        //显示新增弹窗
        showEdit: false,
        editId: '',

        sysList: [],
        groupList: [],
        thirdSysList: [],

      }
    },
    components:{reportEdit},
    computed: {
      ...mapGetters(['permissions']),
      permissionBtn(){
        return {
          pre_report_edit: this.permissions['pre_report_edit'],
          pre_report_add: this.permissions['pre_report_add'],
          pre_report_del: this.permissions['pre_report_del'],
          pre_report_out: this.permissions['pre_report_out']
        }
      }
    },
    created() {
      this.getSysList()
      this.getOutSysList()
    },

    methods: {
      getRangeSelect(value) {
        this.searchForm.commType = value
        this.searchForm.sysCode = ''
        this.searchForm.groupCode = ''
        this.searchForm.thirdSys = ''
        this.searchForm.inSysName = ''
      },
      getSysList() {
        getSysList().then(res => {
          this.sysList = res.data.data
        })
      },
      getGroupListBySysCode(value) {
        return getGroupListBySysCode(value).then(res => {
          this.searchForm.groupCode = ''
          this.groupList = []
          this.groupList = res.data.data
          if (this.groupList.length && !this.searchForm.groupCode) {
            this.searchForm.group = this.groupList[0].groupCode
          }
          for (var i = 0; i < this.sysList.length; i++) {
            if (this.sysList[i].code == this.searchForm.sysCode) {
              // this.searchForm.sysName = this.sysList[i].name
            }
          }
        })
      },
      setSysName() {
        for (var i = 0; i < this.thirdSysList.length; i++) {
          if (this.thirdSysList[i].code == this.searchForm.thirdSys) {
            // this.searchForm.sysName = this.thirdSysList[i].name
            this.searchForm.groupCode = ""
          }
        }
      },
      getOutSysList() {
        getOutSysList().then(res => {
          this.thirdSysList = res.data.data
        })
      },









      getList(page, params){
        this.tableLoading = true
        fetchList(Object.assign({
          current: page.currentPage,
          size: page.pageSize
        }, params, this.searchForm)).then(response => {
          this.tableList = response.data.data.records
          this.page.total = response.data.data.total
          this.tableLoading = false
        })
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      currentChange(current) {
        this.page.currentPage = current
      },
      refreshChange() {
        this.getList(this.page)
      },
      searchChange(param,done) {
        this.searchForm = param
        this.page.currentPage = 1
        this.getList(this.page, param)
        done()
      },
      searchChangeSelf(){
        this.page.currentPage = 1
        this.getList(this.page, this.searchForm)
      },
      handleAdd(){
        this.showEdit = true
        this.editId = null
      },
      //查看详情
      handleEdit(id){
        this.showEdit = true
        this.editId = id
      },
      //删除
      handleDelete: function(row, index) {
        this.$confirm('是否确认删除该通讯配置？', '提示', {
          type: 'warning'
        })
          .then(() => {
            return delObj(row.confId)
          })
          .then((res) => {
            this.$message.success('删除成功')
            this.refreshChange()
          })
          .catch(() => {})
      },
      handleOutTest: function(row, index) {
        testRemote(row.confId).then(response => {
          this.$message.success(response.data.data)
        })
      },
      searchReset() {
        this.searchForm = {
          commType: '0',
          sysCode: '',
          groupCode: '',
          thirdSys: '',
          inSysName: ''
        }
        this.page.currentPage = 1
        this.getList(this.page)
      },
      getTodoById: function (state) {
        function f(id) {
          return state.todos.find(todo => todo.id === id)
        }
      }

    }
  }
</script>
